﻿﻿
<html>
<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>winter wind tell website</title>
    <link rel="shortcut icon" href="own-asset/own-favicon.ico">
</head>
<style>
*
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body, ul, li
{
  padding: 0;
  margin: 0;
  font-family: Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif';
}
ul, li
{
  list-style: none;
}
a
{
  text-decoration: none;
  outline: 0;
}
img
{
  border: 0;
}
 ._ib
 {
  display: inline-block;
  }
  .head
  {
      width: 100%;
      line-height: 60px;
      height: 60px;
      font-weight: bold;
      background-color: #171f26;
 }

 .head li
 {
    display: inline-block;
    margin-left: 10px;
    font-size: 18px;
    font-weight: normal;
    color: black;
 }

.head li a
{
  color: white;
  display: block;
  width: 100%;
 }

.indexBg
{
  height:700px;
  width:100%;
  background: #171f26;
  text-align:center;
  color:white;
}

.pageName span
{
  height:300px;
  line-height:300px;
  font-size:46px;
  color:#00a6ff;
  display:inline-block;
  clear:both;
}
.PageText
{
  padding:0 10px;
  margin-bottom:100px;
  font-size:22px;
}
.centerText
{
  display:none;
}
.hideText
{
  display:none;
}
.downButton,.pageLink
{
  border:2px solid #00a6ff;
  width:200px;
  height:40px;
  line-height:40px;
  margin:0 auto;
  font-size:20px;
  font-weight:bold;
  color:#00a6ff;
  cursor:pointer;

}
.downButton a,.pageLink a
{
  color:#00a6ff;
}
.downButton:hover
{
  border:2px solid #ccc;
  color:#ccc;
}
.downButton2
{
  border:1px solid #171f26;
  height:30px;
  margin-top:80px;
  cursor:normal;
}
.downButton2 img
{
  width:60px;
  height:30px;
}
.contain
{
  text-align:center;
  margin-bottom:30px;
  border-top:1px solid #171f26;
}
.linkContain
{
  margin:70px 0 10px 0;
}
.linkContain li
{
  display:inline-block;
  width:25%;
  height:250px;
  border:1px solid #f2f2f2;
  vertical-align: top;
  margin-top:5px;
  position:relative;
}
.linkContain li figure
{
 margin-top:50px;
}
.linkContain li figure img
{
  width:160px;
  height:40px;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.linkContain li a
{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  opacity:0;
  z-index:1000;
  font-size: 0;
}
.linkContain li:hover img
{
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}
.effect-box p
 {
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	font-size:20px;
}
.contactUs
 {
  height:650px;
  border-top:1px solid #171f26;
  background:#171f26;
  }
  .contactUsTitle
  {
    height:30px;
	width:100%;
	text-align:center;
	color:white;
	margin-top:50px;
	font-size:25px;
  }
  .contactText
  {
    border-top:1px solid #171f26;
  }
  .person
  {
    width:49%;
	height:530px;
	text-align:center;
	display:inline-block;
	color:white;
  }
  .person img
  {
    margin-top:70px;
	border:5px solid #00a6ff;
	border-radius:80px;
	-webkit-transition:-webkit-transform 0.5s;
	transition:transform 0.5s;
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
  }
  .person img:hover
  {
    -webkit-transform:rotate(-90deg);
	transform:rotate(-90deg);
  }
  .person span
  {
    display:block;
	margin-top:20px;
  }
  .person a
  {
    color:white;
  }
  .person a:hover
  {
    color:#00a6ff;
  }
  .copyright
  {
    text-align:center;
	background:#171f26;
	border-top:1px solid #171f26;
  }
  .copyright,.copyright a
  {
    color:#ccc;
  }
@media screen and (min-width:1600px)
{
  .indexBg{height:400px;}
  .pageName span{height:200px;line-height:200px;}
  .contactUs{height:650px;}
  .rightNav{display:none;}
  .downButton2
 {
   display:none;
 }
}
@media screen and (min-width:768px)
{
 .mb_menu
 {
   display: none;
 }
}
@media screen and (max-width:768px)
{
.linkContain li
{
  margin-top:0;
  width:100%;
}
.linkContain
{
  margin:0;
}
.rightNav
{
  display:none;
}
 .person
 {
   width:100%;
   height:50%;
 }
 .person span
  {

	margin-top:0;
  }
 .copyrigh
 {
   height:40px;
 }
 .copyrightText
 {
   margin:30px;
 }
 .downButton:nth-of-type(1)
 {
   display:none;
 }
.head ul
 {
   -moz-transform: translateX(-100%) translateZ(0);
   -ms-transform: translateX(-100%) translateZ(0);
   -o-transform: translateX(-100%) translateZ(0);
   -webkit-transform: translateX(-100%) translateZ(0);
   transform: translateX(-100%) translateZ(0);
   text-align: center;
   width: 100%;
   padding-top: 58px;
   background-color: white;
   position: fixed;
   z-index: 100;
  left: 0;
  top: 0;
  top: 0px;
  border-bottom: 1px solid #dddddd;
  -moz-transition: all .6s ease;
  -o-transition: all .6s ease;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
 }

.head ul.show
{
   -moz-transform: translateX(0%) translateZ(0);
   -ms-transform: translateX(0%) translateZ(0);
   -o-transform: translateX(0%) translateZ(0)
   -webkit-transform: translateX(0%) translateZ(0);
   transform: translateX(0%) translateZ(0);
   text-align: center;
   width: 100%;
   padding-top: 58px;
   background-color: #ccc;
   position: fixed;
   z-index: 100;
   left: 0;
   top: 0;
   top: 0px;
   border-bottom: 1px solid #dddddd;
   -moz-transition: all .6s ease;
   -o-transition: all .6s ease;
   -webkit-transition: all .6s ease;
   transition: all .6s ease;
}

.head li
{
   width: 100%;
   border-top: 1px solid #dddddd;
   margin-left: 0px;
}
.head li  a
{
 color:black;
}
.mb_menu
{
   display: block;
   position: fixed;
   left: 0px;
   top: 0px;
   width: 50px;
   z-index: 9999;
   height: 50px;
   line-height: 50px;
   text-align: center;
}
.mb_menu img
{
   width: 30px;
}
}

</style>
<body>

<div class="mb_menu">
    <img src="menu.png" alt="" />
</div>
 <div class="head bord-btm">
        <ul class="_ib" id="menu">
            <!--<li>-->
                <!--<a href="http://alloyteam.github.io/omi/website/docs.html">Docs</a>-->
            <!--</li>-->
            <li>
{#                <a href="http://bitbucket.org/">Bitbucket</a>#}
            </li>
            <li >
{#                <a href="https://github.com">Github</a>#}
            </li>
             <li>
            <a href="/template/DL/DL.html">登录</a>
        </li>
        <li>
            <a href="/template/ZC/ZC.html">注册</a>
        </li>
        </ul>
</div>
<!--首页大屏图-->
<div class="indexBg">
   <div class="pageName">
      <div class="PageText">
        <span>winter wind tell</span><br/>
		<div>
	       <div class="centerText">一个努力向前飞的菜鸟 -- A rookie trying to fly.</div>
		   <div class="hideText">终将如鹰般搏击长空！-- The eagle he makes our spirits soar.</div>
		</div>
	  </div>
	  <div class="pageLink"><a href="https://github.com/dfs-a">Personal Github Page</a>
{#	  <div class="downButton2"><img src="/static/img/1.jpg"></div>#}
</div>
   </div>
</div>
<div class="clear"></div>
<div class="contain">
   <ul class="linkContain">
      <li>
	     <figure class="effect-box">
			<!-- <img src="ZurmoC-logo.png" alt="Zurmo中文网"/> -->正在搬砖中~~
			<figcaption>
				<!-- <h2>Zurmo中文网</h2> -->
				<!-- <p>希望国人更多人可以去研究，感受下Zurmo的思想和设计架构</p> -->正在搬砖中~~
			</figcaption>
		</figure>
		<!-- <a href="http://zurmo.top/" class="link">View more</a> -->正在搬砖中~~
	  </li>
	  <li>
	     <figure class="effect-box">
			<!-- <img src="csdn.jpg" alt="CSDN博客主页"/> -->正在搬砖中~~
			<figcaption>
				<!-- <h2>CSDN博客主页</h2> -->
				<!-- <p>Zurmo专栏和部分其他的文章</p> -->正在搬砖中~~
			</figcaption>
		</figure>
		<!-- <a href="http://my.csdn.net/Tyrannoaurus">View more</a> -->正在搬砖中~~
	  </li>
	  <li>
	     <figure class="effect-box">
			<!-- <img src="Zurmo-logo.png" alt="Zurmo官网"/> -->正在搬砖中~~
			<figcaption>
				<!-- <h2>Zurmo官网</h2> -->
				<!-- <p>Zurmo是一个开源的客户关系管理(CRM)系统,采用PHP开发.</p> -->正在搬砖中~~
			</figcaption>
		</figure>
		<!-- <a href="http://zurmo.org/">View more</a> -->正在搬砖中~~
	  </li>
	  <li>
	     <figure class="effect-box">
			<!-- <img src="hexo.png" alt="Hexo 博客"/> -->
			<figcaption>
				<!-- <h2>Hexo 博客</h2> -->
				<!-- <p>请常常来访问啊，说不定会有惊喜呦！</p> -->
			</figcaption>
		</figure>
		<!-- <a href="http://www.basecase.cn:8090/">View more</a> -->
	  </li>
	  <li>
	     <figure class="effect-box">
			<!-- <img src="teamWorks.png" alt="团队主页&作品集"/> -->
			<figcaption>
				<!-- <h2>团队主页&作品集</h2> -->
				<!-- <p>三个臭皮匠顶个诸葛亮！</p> -->
			</figcaption>
		</figure>
		<!-- <a href="http://www.eooker.com/">View more</a> -->
	  </li>
	  <li>
	     <figure class="effect-box">
			<!-- <img src="continue.png" alt="continue"/> -->
			<figcaption>
				<!-- <h2>待续...</h2> -->
				<!-- <p>生命不止，奋斗不息...</p> -->
			</figcaption>
		</figure>
		<a href="#">View more</a>
	  </li>
   </ul>
   <div class="downButton">Contact Us</div>
</div>
<div class="contactUs">
<div class="contactUsTitle">联系我们 & 技术支持</div>
<div class="contactText">
  <div class="person">
     <!-- <img src="person2.jpg"/><br/> -->
	 <!-- <span>QQ:&nbsp;&nbsp;296597795</span> -->
	 <!-- <span>CSDN:&nbsp;&nbsp;<a href="http://my.csdn.net/xiyatu123">http://my.csdn.net/xiyatu123</a></span> -->
  </div>
  <div class="person">
     <!-- <img src="person1.jpg"/><br/> -->
	 <!-- <span>QQ:&nbsp;&nbsp;1658370535</span> -->
	 <!-- <span>CSDN:&nbsp;&nbsp;<a href="http://my.csdn.net/Tyrannoaurus">http://my.csdn.net/Tyrannoaurus</a></span> -->
  </div>
</div>
<div class="copyright"><div class="copyrightText">冬风诉 © 2020 <a href="https://www.jianshu.com/u/cc7a7254bdcc">dfs.cn</a>. All Rights Reserved.</div></div>
</div>
<style>
.rightNav
{
  position:fixed;
  top:50%;
  right:20px;
}
.rightNav li
{
  border-radius:50px;
  width:15px;
  height:15px;
  line-height:15px;
  text-align:center;
  color:white;
  font-size:12px;
  margin-top:10px;
  background:#00a6ff;
}
.rightNav li:hover
{
  cursor:pointer;
  background:orange;
}
</style>
<ul class="rightNav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>

<script src="http://lib.sinaapp.com/js/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $(".centerText:eq(0)").slideDown("slow");

 setTimeout(function(){
   $(".hideText:eq(0)").slideDown("slow");
   $(".centerText:eq(0)").slideUp("slow");
 },2000);
   $(".linkContain").find("li").each(function(i){
     if(i%2==0)$(this).css("border-top","4px solid #48bb53");
	 else  $(this).css("border-top","4px solid #00a6ff ");
   });

   var containTop = $(".contain:eq(0)").offset().top;
   var contactUsTop = $(".contactUs:eq(0)").offset().top;

   $(".downButton:eq(0)").click(function(){
	   $("html,body").animate({scrollTop:contactUsTop},1000);
   });
  $(".downButton2:eq(0)").click(function(){
	  $("html,body").animate({scrollTop:containTop},1000);
   });



   $(".rightNav").find("li").each(function(i){
       $(this).click(function(){
	      if(i==0) $("html,body").animate({scrollTop:0},800);
		  else
		    if(i==1) $("html,body").animate({scrollTop:containTop},1000);
			else $("html,body").animate({scrollTop:contactUsTop},1000);
	   });
   });

});
function toggleClass(element, className) {
        if (!element || !className) {
            return;
        }

        var classString = element.className, nameIndex = classString.indexOf(className);
        if (nameIndex == -1) {
            classString += ' ' + className;
        }
        else {
            classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
        }
        element.className = classString;
    }
    var menuDiv = document.getElementById("menu");
    document.querySelector(".mb_menu").onclick = function () {
        toggleClass(menuDiv, "show");

    }
</script>
